<template>
	<view style=" min-height:100vh;background-color: white;padding: 20rpx;padding-bottom: 40rpx;">
		<fui-form ref="form" labelWidth="180">
			<fui-form-item asterisk bottomBorder label="任务标题:">
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入任务标题"></fui-input>
			</fui-form-item>
			<fui-form-item asterisk bottomBorder label="任务类型:">
				<view class="" @click="show=true">
					{{formData.formText?`${formData.formText}`:"请选择任务类型"}}
				</view>
				<fui-picker linkage :layer="1" :options="options" title="请选择任务类型" :show="show" @change="change"
					@cancel="cancel"></fui-picker>
			</fui-form-item>
			<fui-form-item asterisk bottomBorder label="任务描述:">
				<template v-slot:vertical>
					<fui-textarea maxlength="-1" :padding="['32rpx','0rpx']" :border-bottom="false" :border-top="false"
						placeholder="请输入任务描述..." v-model="formData.descr"></fui-textarea>
				</template>
			</fui-form-item>
			<fui-form-item asterisk :labelWidth="250" bottomBorder label="任务广告图片:">
				<template v-slot:vertical>
					<view style="width: 100%;">
						<fui-upload immediate :url="url" ref="imgUpload" @success="imgSuccess" @error="imgError"
							@complete="imgComplete"></fui-upload>
					</view>
				</template>
			</fui-form-item>
			<fui-form-item asterisk bottomBorder label="任务佣金:">
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入工资金额"></fui-input>
			</fui-form-item>
			<fui-form-item asterisk bottomBorder label="任务周期:">
				<view class="" @click="dataShow=true">
					{{formData.dataNum?`${formData.dataNum}`:"请选择任务期长"}}
				</view>
				<fui-date-picker range :show="dataShow" type="3" @change="dataChange"
					@cancel="dataCancel"></fui-date-picker>
			</fui-form-item>
			<fui-form-item asterisk :labelWidth="250" bottomBorder label="报名截止日期:">
				<view class="" @click="reportShow=true">
					{{formData.reportData?`${formData.reportData}`:"请选择报名截止日期"}}
				</view>
				<fui-date-picker :show="reportShow" type="3" @change="reportChange"
					@cancel="reportCancel"></fui-date-picker>
			</fui-form-item>
			<fui-form-item asterisk :labelWidth="280" bottomBorder label="是否有转发奖励:">
				<fui-radio-group name="radio" @change="checked">
					<view class="fui-list__item flex">


						<view class="fui-align__center">
							<fui-radio value="0" :checked="gender==0"></fui-radio>
							<text class="fui-text">没有</text>
						</view>


						<view class="fui-align__center">
							<fui-radio value="1" :checked="gender==1"></fui-radio>
							<text class="fui-text">有</text>
						</view>

					</view>
				</fui-radio-group>

			</fui-form-item>
			<fui-form-item asterisk bottomBorder label="转发奖励:" v-if="gender==1">
				<view class="flex" style="justify-content: space-between;">
					<view class="flex" style="width: 48%;">
						<fui-input :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/浏览</text></fui-input>
					</view>
					<view class="flex" style="width: 48%;">
						<fui-input :borderBottom="false" :padding="['20rpx','0rpx']" type="number"
							placeholder="请输入"><text>币/成交</text></fui-input>
					</view>
				</view>
			</fui-form-item>

		</fui-form>
		<view class="fui-btn__box">
			<fui-button text="确定发布" bold @click="submit"></fui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reportShow: false,
				dataShow: false,
				gender: 0,
				show: false,
				options: [{
					text: '带货',
					value: 1
				}, {
					text: '转发',
					value: 2
				}, {
					text: '众包',
					value: 3
				}, {
					text: '年薪',
					value: 4
				}],

				//上传接口地址
				url: 'https://ffa.firstui.cn/api/example/upload-file',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				imgUrls: [],

				form: null,
				imgUpload: null,

				formData: {},
			};
		},
		methods: {
			reportChange(e) {
				this.reportShow = false
				console.log(e)

				this.formData.reportData = e.result
			},
			reportCancel() {
				this.reportShow = false
			},
			dataChange(e) {
				this.dataShow = false
				console.log(e)

				this.formData.dataNum = `${e.startDate.result} 至 ${e.endDate.result}`
			},
			dataCancel() {
				this.dataShow = false
			},
			change(e) {
				this.show = false
				this.formData.formText = e.text
				console.log(e)
			},
			cancel() {
				this.show = false
			},
			//图片
			imgSuccess(e) {
				console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				if (res.data.url) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的视频地址
					//e.index为视频索引值
					this.$refs.imgUpload.result(res.data.url, e.index)


				}
			},
			//上传失败时触发
			imgError(e) {
				this.status = e.status
			},
			//选择视频或上传完成时触发
			imgComplete(e) {
				this.status = e.status
				this.imgUrls = e.urls
				if (this.status === 'success' && e.action === 'upload') {
					// this.fui.toast('上传完成！')
					//已上传完成的视频列表 this.urls
					console.log(this.urls)
				}
			},
			checked(e) {
				this.gender = e.detail.value

			},
			onFormSubmit(e) {
				this.formData = e.detail.value
				console.log('this.formData', this.formData);

			},
			onFormReset(e) {
				this.formData = {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-btn__box {
		margin-top: 20rpx;

	}

	.fui-align__center {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	::v-deep .fui-uploadv__del-wrap {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-uploadv__item {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	::v-deep .fui-upload__video {
		width: 100% !important;
		margin: 0 0 0 0 !important;
	}

	.uni-form-item {
		padding: 15px 0;
	}

	.title {
		margin-bottom: 10px;
	}

	.group-item {
		flex-direction: row;
		margin-right: 20px;
	}

	.btn {
		flex: 1;
	}

	.btn-submit {
		margin-right: 5px;
	}

	.btn-reset {
		margin-left: 5px;
	}

	.result {
		margin-top: 30px;
	}

	.formItem {
		background-color: white;
		padding: 20rpx;
	}
</style>